<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" @opened="opens" :with-header="false" class="demand_box" size='320px' @close="resetForm()">
        <div class="flexbox flexcolumn height_100">
            <div class="demand_head flexbox flexcenter flexbetween">
                <span class="demand_title">表格显示设置</span>
                <span class="icon_btn icon_btn_32" @click="resetForm()"><img src="../../assets/img/close_check.svg" alt=""></span>
            </div>
            <div class="demand_center flex">
                <div class="set_title flexbox flexcenter flexbetween">
                    <span class="font_14 color_01 set_text">表头设置</span>
                    <el-link :underline="false" type="primary" @click="resetTable">恢复默认</el-link>
                </div>
                <ul class="un_set">
                    <li>发布达人</li>
                    <li>视频信息</li>
                </ul>
                <el-divider><span class="font_12 color_03">以上属性不可修改</span></el-divider>
                <ul class="has_set" id="items">
                    <template v-for="item in tableHeader">
                        <li :key="item.prop" v-if="item.prop=='bdrq'">
                            <div class="flexbox flexcenter flexbetween bdrq_box" @click="isShow()">
                                <div class="flexbox flexcenter select_bd">
                                    <svg width="6" height="10" style="margin-right:10px;margin-top:2px" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="1" cy="1" r="1" fill="#B4B7BD" />
                                        <circle cx="1" cy="5" r="1" fill="#B4B7BD" />
                                        <circle cx="1" cy="9" r="1" fill="#B4B7BD" />
                                        <circle cx="5" cy="1" r="1" fill="#B4B7BD" />
                                        <circle cx="5" cy="5" r="1" fill="#B4B7BD" />
                                        <circle cx="5" cy="9" r="1" fill="#B4B7BD" />
                                    </svg>
                                    {{item.title}}
                                    <i class="el-icon-caret-bottom" style="margin-left:10px" :class="{'role_img':is_show}"></i>
                                </div>
                                <el-switch v-model="item.is_show" active-value='1' inactive-value="0">
                                </el-switch>
                            </div>
                            <div class="bdrq_list select_bd" v-if="is_show">
                                <div class="flexbox flexcenter flexbetween bdrq_item" v-for="o in item.children" :key="o">
                                    <span class="bd_text">{{o.title}}</span>
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" v-if="o.is_show" class="select_bd" @click="clickView(o)">
                                        <path d="M9.99996 15C14.6023 15 18.3333 10 18.3333 10C18.3333 10 14.6023 5 9.99996 5C5.39758 5 1.66663 10 1.66663 10C1.66663 10 5.39758 15 9.99996 15Z" fill="#4475FF" stroke="#4475FF" stroke-width="1.33333" stroke-linejoin="round" />
                                        <path d="M9.99996 12.0833C11.1505 12.0833 12.0833 11.1505 12.0833 9.99996C12.0833 8.84938 11.1505 7.91663 9.99996 7.91663C8.84938 7.91663 7.91663 8.84938 7.91663 9.99996C7.91663 11.1505 8.84938 12.0833 9.99996 12.0833Z" fill="white" stroke="white" stroke-width="1.33333" stroke-linejoin="round" />
                                    </svg>
                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="select_bd" v-else @click="clickView(o)">
                                        <path d="M9.99996 15C14.6023 15 18.3333 10 18.3333 10C18.3333 10 14.6023 5 9.99996 5C5.39758 5 1.66663 10 1.66663 10C1.66663 10 5.39758 15 9.99996 15Z" fill="#B4B7BD" stroke="#B4B7BD" stroke-width="1.33333" stroke-linejoin="round" />
                                        <path d="M9.99996 12.0833C10.2536 12.0833 10.4966 12.038 10.7214 11.955C11.6198 11.6234 11.1647 10.1895 10.5 9.5V9.5V9.5C9.99379 8.9749 8.83879 8.12317 8.37986 8.69006C8.09016 9.04792 7.91663 9.50367 7.91663 9.99996C7.91663 11.1505 8.84938 12.0833 9.99996 12.0833Z" fill="white" stroke="white" stroke-width="1.33333" stroke-linejoin="round" />
                                        <path d="M4 3.5L16 15.5" stroke="#B4B7BD" stroke-width="2" stroke-linecap="round" />
                                    </svg>
                                </div>
                            </div>
                        </li>
                        <li class="flexbox flexcenter flexbetween" :key="item.prop" v-else>
                            <div class="flexbox flexcenter">
                                <svg width="6" height="10" style="margin-right:10px;margin-top:2px" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="1" cy="1" r="1" fill="#B4B7BD" />
                                    <circle cx="1" cy="5" r="1" fill="#B4B7BD" />
                                    <circle cx="1" cy="9" r="1" fill="#B4B7BD" />
                                    <circle cx="5" cy="1" r="1" fill="#B4B7BD" />
                                    <circle cx="5" cy="5" r="1" fill="#B4B7BD" />
                                    <circle cx="5" cy="9" r="1" fill="#B4B7BD" />
                                </svg>
                                {{item.title}}
                            </div>
                            <el-switch v-model="item.is_show" active-value='1' inactive-value="0">
                            </el-switch>
                        </li>
                    </template>

                </ul>
            </div>
            <div class="demand_footer flexbox flexcenter">
                <el-button size="small" @click="resetForm()" class="el-button-width">取 消</el-button>
                <el-button size="small" type="primary" @click="submitForm()" :disabled="loading" :loading="loading" class="el-button-width">保 存</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<script>
import { headList } from "../../assets/js/feixing";
import Sortable from "sortablejs";
export default {
    name: "",
    data() {
        return {
            dialogVisible: false,
            tableHeader: [],
            is_show: true,
        };
    },
    created() {
        
    },
    methods: {
        getParentData(visible, data) {
            this.dialogVisible = visible;
            this.tableHeader = JSON.parse(JSON.stringify(data))
        },

        clickView(item){
            item.is_show = !item.is_show
        },

        isShow(){
            this.is_show = !this.is_show
        },

        // 打开抽屉层初始化表格
        opens() {
            this.$nextTick(() => {
                this.test();
            });
        },

        // 拖拽
        test() {
            var that = this;
            var el = document.getElementById("items");
            // 常用
            new Sortable(el, {
                onEnd: function (evt) {
                    // 获取排序之后的data数据
                    that.tableHeader.splice(
                        evt.newIndex,
                        0,
                        that.tableHeader.splice(evt.oldIndex, 1)[0]
                    );
                    var newArray = that.tableHeader.slice(0);
                    that.tableHeader = [];
                    that.$nextTick(function () {
                        that.tableHeader = newArray;
                    });
                },
            });
        },

        // 提交添加
        async submitForm() {
            this.loading = true;
            var { data: res } = await this.$http.post(
                "fxdata/fxboard/customTableSave",
                {
                    custom_field:{
                        fx_head:this.tableHeader,
                    }
                }
            );

            if (res.code !== 200) {
                this.$message.error(res.msg);
                this.loading = false;
                return;
            } else {
                this.loading = false;
                this.$message({
                    message: "保存成功",
                    type: "success",
                });
                this.$emit("getTableHead");
                this.resetForm();
            }
        },

        // 重置表头
        resetTable() {
            this.$confirm("是否要恢复默认?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.tableHeader = headList
                })
                .catch(() => {});
        },

        resetForm() {
            this.dialogVisible = false;
        },
    },
    components: {},
};
</script>


<style scoped>
.set_text {
    font-weight: bold;
}
.un_set {
    margin-top: 15px;
}
.un_set li,
.bdrq_box {
    line-height: 40px;
    font-size: 14px;
    color: #17233d;
}
.has_set li {
    cursor: all-scroll;
    min-height: 40px;
    font-size: 14px;
    color: #17233d;
}
.select_bd {
    cursor: pointer;
}
.bdrq_list {
    padding-left: 20px;
}
.bdrq_item {
    height: 40px;
}
.bd_text {
    font-size: 14px;
    color: #616c85;
}
.role_img{
    transform: rotate(-180deg);
}
</style>
